<template>
  <div>
    <van-nav-bar title="修改用户名" left-arrow @click-left="GOback" placeholder :border="false" />

    <div class="setname-top">
      <input type="text" placeholder="输入用户名" ref="setname" v-model="values" @input="ChangeTEXT">
    </div>
    <div class="user_text">
      <p class="user_1" v-if="values===''||values.length>=5">用户名只能修改一次(5-24字符之间)</p>
      <p class="user_1 unlikep" ref="setname-input" v-else>用户名长度在5到24位之间</p>
    </div>
    <div class="exitlogin" @click="ModifyConfirm(values)">确认修改</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      values: ''
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    // 表单文本框发生变化事件
    ChangeTEXT() {
      if (this.values.length < 5) {
        this.$refs.setname.style.borderColor = 'red'
      } else {
        this.$refs.setname.style.borderColor = ''
      }
    },
    // 确认修改
    ModifyConfirm(values) {
      if (values > 4) {
        this.$store.commit('UserCheck', values)
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.setname-top {
  padding-top: 0.4rem;
  padding-left: 0.4rem;
  input {
    background: none;
    width: 96%;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0.2rem 0.1rem;
    line-height: 1.2rem;
    font-size: 0.65rem;
    display: block;
  }
}
.user_text {
  .user_1 {
    width: 100%;
    color: #666;
    padding: 0.4rem;
  }
}
.setname-input {
  border-color: red !important;
}
.unlikep {
  color: red !important;
}
.exitlogin {
  width: 96%;
  margin: 1rem auto 0;
  line-height: 2rem;
  border-radius: 5px;
  text-align: center;
  background: #3199e8;
  font-size: 0.6rem;
  color: #fff;
}
</style>